<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			@keyframes qiehuan{
				
				0%{
					transform: translate(0px);
				}
				20%{
					transform: translate(-400px);
				}
				40%{
					transform: translate(-800px);
				}
				60%{
					transform: translate(-1200px);
				}
				80%{
					transform: translate(-1600px);
				}
				100%{
					transform: translate(-2000px);
				}
			}
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#d1 {
				width: 400px;
				height: 400px;
				border: 1px solid red;
				margin: 30px auto;
				overflow: hidden;
				position:relative;
			}
			
			#imgs {
				width: 2400px;
				height: 400px;
				animation: qiehuan 5s infinite;
			}
			
			
			img {
				width: 400px;
				float: left;
			}
			#imgnav{
				position:absolute;
				bottom:10px;
				left:0px;
				width:100%;
				text-align:center;
			}
		</style>
	</head>

	<body>
		<div id="d1">
			<div id="imgs">
				<img src="1.jpg" />
				<img src="2.jpg" />
				<img src="3.jpg" />
				<img src="4.jpg" />
				<img src="5.jpg" />
				<img src="6.jpg" />
			</div>
			<div id="imgnav">
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
			</div>
		</div>
	</body>

</html>